<template>
  <div>
    <!-- 支持idCard(身份证),sex(性别查询),examineeName(黑名单),blackContent(被拉黑内容)。 -->
    <navigation-bar>
      <div class="searchContent">
        <el-input
          v-model="examineeName"
          placeholder="请输入姓名"
          size="mini"
          style="width: 150px; margin-right: 10px"
        ></el-input>
        <el-input
          v-model="idCard"
          placeholder="请输入身份证"
          size="mini"
          style="width: 150px; margin-right: 10px"
        ></el-input>
        <el-select
          v-model="sexValue"
          placeholder="请选择性别"
          size="small"
          style="width: 150px; margin-right: 10px"
          clearable
        >
          <el-option
            v-for="item in sexList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="blackContent"
          placeholder="拉黑原因"
          size="mini"
          style="width: 150px; margin-right: 10px"
        ></el-input>
        <custom-button
          type="search"
          style="margin-right: 10px"
          @searchClick="searchClick"
        ></custom-button>
        <custom-button
          type="reset"
          style="margin-right: 10px"
          @resetClick="resetClick"
        ></custom-button>
      </div>
    </navigation-bar>
    <el-row>
      <el-col :span="24">
        <table-index
          :dataSource="dataSource"
          :tableColumns="tableColumns"
          :btnList="btnList"
          :pageSize="pageSize"
          :pageCount="pageCount"
          :pageNo="pageNo"
          @pageChange="pageChange"
        ></table-index>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import customButton from "@/components/customComponents/customForm/customButton";
import tableIndex from "@/components/customComponents/customeTable/tableIndex";
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { Utility } from "@/libs/utility";
export default {
  components: {
    navigationBar,
    customButton,
    tableIndex,
  },
  data() {
    return {
      sexList: Utility.getDictList("sex"),
      sexValue: "",
      blackContent: "",
      idCard: "",
      examineeName: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "examineeName",
          label: "姓名",
        },
        {
          prop: "sex",
          label: "性别",
          dictName: "sex",
        },
        {
          prop: "idCard",
          label: "身份证号",
        },
        {
          prop: "blackContent",
          label: "拉黑原因",
        },
        {
          prop: "riotHospital",
          label: "所在医院",
        },
        {
          prop: "createByName",
          label: "记录人",
        },
        {
          prop: "createTime",
          label: "记录时间",
          width: 160,
        },
      ],
      btnList: [],
      pageSize: 20,
      pageCount: 100,
      pageNo: 1,
    };
  },
  methods: {
    searchClick() {
      this.pageNo = 1;
      this.initPage();
    },
    resetClick() {
      this.examineeName = "";
      this.sexValue = "";
      this.blackContent = "";
      this.idCard = "";
    },
    // 分页点击事件
    pageChange(p) {
      this.pageNo = p;
      this.initPage();
    },
    // 初始化事件
    initPage() {
      let self = this;
      AjaxCommon("/ccdc/black/listByPage", "post", {
        examineeName: this.examineeName,
        sex: this.sexValue,
        idCard: this.idCard,
        blackContent: this.blackContent,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.data.code == 200) {
          self.dataSource = res.data.result.records;
          self.pageCount = res.data.result.total;
        } else {
          PopupCommon.notify("error", res.data.message);
        }
      });
    },
  },
  mounted() {
    this.initPage();
  },
};
</script>

<style></style>
